<template>
  <view class="page">
    <view class="tags">
      <view class="tag" v-for="(item, idx) of category.list" :key="idx">
        {{item}}
      </view>
    </view>
    <view class="how">投放指导</view>
    <view class="guides">
      <view v-for="(item, idx) of category.guide" :key="idx">
        {{item}}
      </view>
    </view>
  </view>
</template>

<script>
  const category_map = [{
    name: '可回收垃圾',
    category: 1,
    list: ['书本报纸', '纸箱', '塑料玩具', '塑料瓶', '碎玻璃', '玻璃杯', '易拉罐', '金属零件', '衣服', '毛绒制品', '家电', '电子产品'],
    guide: ['1. 可回收物应轻投轻放，清洁干燥、避免污染；', '2. 废纸尽量平整;', '3. 立体包装物请清空内容物，清洁后压扁投放；', '有尖锐边角的，应包裹后投放。'],
  }, {
    name: '有害垃圾',
    category: 2,
    list: ['充电电池', '充电电池', '卤素灯', '荧光灯', '过期药品', '药品包装', '油漆桶', '指甲油', '水银温度计', '水银血压计', '杀虫剂', 'X光片'],
    guide: ['1. 有害垃圾指废电池、废灯管、废药品、废油漆及其容器等对人体健康或者自然环境造成直接或者潜在危害的生活废弃物；',
      '2. 常见包括废电池、废荧光灯管、废灯泡、废水银温度计、废油漆桶、过期药品等。有害有毒垃圾需特殊正确的方法安全处理。'
    ],
  }, {
    name: '厨余(湿)垃圾',
    category: 4,
    list: ['蔬菜', '水果', '肉', '鸡蛋', '剩菜剩饭', '过期食品', '动物内脏', '花卉绿植', '蛋糕饼干', '面包', '宠物饲料', '中药药渣'],
    guide: ['1. 厨余垃圾应从产生时就与其他类别垃圾分开归类，去除食材食品的包装物，不得混入纸巾餐具、厨房用具等；', '2. 厨余垃圾中的废弃食用油脂，应单独存放、交付餐厨垃圾收集运输单位；',
      '3. 难以生物降解的贝壳、大骨头、毛发等，宜作为其他垃圾投放；', '4. 厨余垃圾滤去水分后再投放。'
    ],
  }, {
    name: '其他(干)垃圾',
    category: 8,
    list: ['卫生纸', '尿不湿', '烟蒂', '污损塑料', '污损纸张', '毛发', '尘土', '大棒骨', '带胶制品', '镜子', '雨伞', '打火机'],
    guide: ['危害较小，但无再次利用价值，如建筑垃圾类，生活垃圾类等，一般采取填坑、焚烧、卫生分解等方法，部分还可以使用生物解决，如放蚯蚓等。是可回收垃圾、厨余垃圾、有害垃圾剩余下来的一种垃圾。'],
  }]

  export default {
    data() {
      return {
        category: {},
      }
    },
    onLoad(option) {
      this.category = category_map.find(i => i.category === +option.id)
      uni.setNavigationBarTitle({
        title: this.category.name,
      })
    }
  }
</script>

<style scoped lang="less">
  .page {
    padding: 0 32upx;
  }
  .tags {
    display: flex;
    flex-wrap: wrap;
    justify-content: space-between;
  }

  .tag {
    display: flex;
    justify-content: center;
    align-items: center;
    @size: 160upx;
    width: @size;
    height: @size;
    background: #fffb;
    border-radius: 20upx;
    margin-top: 32upx;
    border: 4upx solid black;
  }
  
  .how {
    font-size: 48upx;
    text-align: center;
    margin: 60upx 0;
  }

  .guides {
    display: flex;
    flex-direction: column;
    width: 100%;
  }
</style>
